
/*
 * @Author: 于建霞
 * @Date: 2020-11-Tu 03:30:26
 * @Last Modified by:   于建霞
 * @Last Modified time: 2020-11-Tu 03:30:26
 * 
 * * @description:  短信通知弹框
 */

import React, { useState, useCallback, useRef, useEffect } from 'react';
import { Modal, Button, Card, Form, Input, Select, message,Tooltip } from 'antd';
import ProTable from '@ant-design/pro-table';
import { useRequest } from '@umijs/hooks';
import styles from './index.less';
import { getMsmTable, sendMsg } from '../../service.js';

const { Option } = Select;
const { TextArea } = Input;
const SMSNotice = (props) => {
	const { form: { getFieldDecorator, validateFields }, 
		smsNoticeVisible, 
		setSmsNoticeVisible,
		rowData
	} = props;

	const [smsTemplateData, setSmsTemplateData] = useState([]) // 短信模板数据
	const [smsTemplateContent, setSmsTemplateContent] = useState('') //短信模板--短信内容
	// 获取短信模板
	useRequest((params) => getMsmTable(params), {
		onSuccess: res =>{
			setSmsTemplateData(res.data)
		}
	})

	// 短信模板选择
	const handleSelectChange = (val) => {
		let temp = smsTemplateData.filter(item => {
				return val === item.id
		})
		setSmsTemplateContent(temp[0].templateContent)
	}
	// 发送
	const handleOk = () => {
		validateFields((err, values) => {
			if (!err) {
				let obj = JSON.parse(JSON.stringify(rowData))
				obj.map(item => {
					item.smsContent = values.smsContent
					item.vipRoomName = item.roomName
				})
				sendMsg(obj).then(res=>{
					if (res.code === '0') {
						setSmsNoticeVisible(false);
						message.success('短信发送成功！')
						setSmsTemplateContent('')
					}
				})
			}
		});
	}
	// 取消
	const handleCancel = () => {
		setSmsTemplateContent('')
		setSmsNoticeVisible(false);
	}
	return (
		<Modal
			title="短信通知"
			visible={smsNoticeVisible}
			maskClosable={false}
			onOk={handleOk}
			destroyOnClose={true}
			width="700px"
			okText="发送"
			onCancel={handleCancel}
		>
			{/* 收件人 */}
			<Card
				title="收件人"
				style={{ width: '100%', height: "200" }}
				hoverable={true}
				className={styles.smsModal}
				headStyle={{ backgroundColor: "#FAFAFA" }}
				bodyStyle={{ padding: 12, overflowY: "auto", maxHeight: "200px", display: "flex", justifyContent: "flex-start", flexWrap: "wrap" }}
			>
				{rowData && rowData.map((item, index) => {
					return (
						<p key={index} className={`${styles.passengersInfoItem}  ${styles[index % 2 == 0 ? 'mr4' : '']} `}>
							<span>{item.paxName}</span>
							<Tooltip title={item.phoneNum}>{item.phoneNum}</Tooltip>
						</p>
					)
				})}

			</Card>
			{/* 短信模板 */}
			<Card
				title="短信"
				style={{ width: '100%', height: "200" }}
				hoverable={true}
				style={{ marginTop: "30px" }}
				className={styles.smsModal}
				headStyle={{ backgroundColor: "#FAFAFA" }}
				bodyStyle={{ padding: 12, }}
				>
					<Form layout="vertical">
						<Form.Item label="短信模板：" style={{ marginBottom: "0" }}>
							{getFieldDecorator('gender', {
								rules: [{ required: true, message: '请选择短信模板' }],
							})(
								<Select
									placeholder="贵宾室旅客登机通知短信模版"
									onChange={(val)=>{
										handleSelectChange(val)
									}}
								>
									{smsTemplateData && smsTemplateData.map((item, index) => {
										return (<Option value={item.id}>{item.templateName}</Option>)
									})}
								</Select>
							)}
						</Form.Item>
						<Form.Item label="短信内容：" >
							{getFieldDecorator('smsContent', {
								rules: [{ required: true, message: '请输入短信内容' }],
								initialValue: smsTemplateContent
							})(
								<TextArea rows={4}/>
							)}
						</Form.Item>
				</Form>

			</Card>
		</Modal>
	)
}

export default  Form.create()(SMSNotice);